
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>城市三级联动</title>
    <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
    <!-- 这是城市三级联动json,联动json名为：city_linkage -->
    <script type="text/javascript" src="./city_linkage.js"></script>
</head>
<style>
    *{padding: 0;margin:0;}
    li{list-style: none;}
    #city_linkage_modal{background: #000;opacity: 0.8;height: 100%;width: 100%;position: fixed;top: 0;left: 0;}
    #city_linkage_modal .city_box{width: 50%;height: 70%;position: fixed;top: 10%;left: 25%;background: #fff;z-index: 50;}
    #city_linkage_modal .city_box ul{width: 33%;height: 100%;float: left;overflow-y:auto;overflow-x:hidden;position: absolute;border-left: 1px solid #DCDCDC;background: #fff;}
    #city_linkage_modal .city_box ul.province{width: 36%;left:0;z-index: 100;}
    #city_linkage_modal .city_box ul.city{width: 36%;left: 33%;z-index: 101;background: #F3F3F3;}
    #city_linkage_modal .city_box ul.county{width: 34%;left: 66%;z-index: 102;background: #EEEEEE;}
    #city_linkage_modal .city_box ul li{width: 100%;height: 40px;line-height: 40px;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;text-align: center;cursor: pointer;}
    #city_linkage_modal .city_box ul li:hover,#city_linkage_modal .city_box ul li.city_current{background: #3CCC89;color: #fff;}
</style>
<script type="text/javascript">
    $(function(){
        /**
         * 城市三级联动obj
         */
        var city_linkage_obj = {
            //渲染省级城市
            'set_province' : function(city_linkage){
                var strCode = '';
                $.each(city_linkage.province, function(k,v) {
                    strCode += '<li ke="'+v.ke+'">'+v.va+'</li>';
                });
                $('#city_linkage_modal .province').empty().append(strCode);
            },
            //点击城市效果
            'click_city'   : function(city_linkage,ke,$dom){
                if(ke=='') return false;
                var val = $.trim($dom.text());
                //点击省级城市
                if(ke.substr(2)=='0000'){
                    var reg     = eval("/"+ke.substr(0,2)+"\\d{2}00/");
                    var strCode = '';
                    $.each(city_linkage.city, function(k,v) {
                        if(!reg.test(v.ke)) return true;
                        strCode += '<li ke="'+v.ke+'" province="'+val+'" city="'+v.va+'">'+v.va+'</li>';
                    });
                    $('#city_linkage_modal .city').empty().append(strCode).siblings('.county').empty();
                }
                //点击市级城市
                if(ke.substr(2)!='0000'&&ke.substr(4)=='00'){
                    //区分直辖市
                    var reg     = ke=='110100'||ke=='120100'||ke=='500100'||ke=='310100' ? eval("/"+ke.substr(0,3)+"\\d{3}/") : eval("/"+ke.substr(0,4)+"\\d{2}/");
                    var strCode = '';
                    $.each(city_linkage.county, function(k,v) {
                        if(!reg.test(v.ke)) return true;
                        strCode += '<li ke="'+v.ke+'" province="'+$dom.attr('province')+'" city="'+val+'" county="'+v.va+'">'+v.va+'</li>';
                    });
                    $('#city_linkage_modal .county').empty().append(strCode);
                }
                //点击县级城市
                if(ke.substr(4)!='00'){
                    alert('你选中的是'+$dom.attr('province')+' '+$dom.attr('city')+' '+val);
                }
            }
        };


        city_linkage_obj.set_province(city_linkage); //渲染省级城市
        //点击城市
        $('#city_linkage_modal').on('click', 'ul li', function(e) {
            //阻止事件冒泡
            e && e.stopPropagation ? e.stopPropagation() : window.event.cancelBubble = true;

            $(this).addClass('city_current').siblings('li').removeClass('city_current');
            var ke = $(this).attr('ke')||'';
            if(city_linkage_obj.click_city(city_linkage,ke,$(this))==false) return false;
        });
        //隐藏模态框
        $('#city_linkage_modal').click(function(){
            $(this).hide();
        });
    })
</script>
<body>
    <!--城市三级联动模态框-->
    <div id="city_linkage_modal">
        <div class="city_box">
            <!--省-->
            <ul class="province">
                <!-- <li>北京市</li> -->
            </ul>
            <!--市-->
            <ul class="city"></ul>
            <!--县-->
            <ul class="county"></ul>
        </div>
    </div>
</body>
</html>


